var pages = [];

var currentPageIndex = -1;

function Page() {
    this.x = 0;
    this.y = 0;
    this.z = 0;
    this.rotate_x = 0;
    this.rotate_y = 0;
    this.rotate_z = 0;
    this.scale = 1;
    this.bg = "rgba(255,255,255,0)";
    this.objs = [];
    this.has_back=true;
    this.dom = null;
}
Page.prototype.to_html = function () {
    var child_html = "";
    for (var i = 0; i < this.objs.length; i++) {
        var child = this.objs[i];
        child_html += child.to_html();
    }
    return format(
        '<{el} x="{x}" y="{y}" z="{z}" rotate-x="{rotatex}" rotate-y="{rotatey}" rotate-z="{rotatez}" scale="{scale}">{childhtml}</{el}>',
        {
            x: this.x,
            y: this.y,
            z: this.z,
            rotatex: this.rotate_x,
            rotatey: this.rotate_y,
            rotatez: this.rotate_z,
            scale: this.scale,
            childhtml: child_html,
            el:this.has_back?"ppage":"opage"
        }
    );
}
function create_page() {
    var page = new Page();
    pages.push(page);
    currentPageIndex=pages.length-1;
    var page_box = $('.box');
    var div = document.createElement('div');
    div.innerText = "第" + currentPageIndex + "页";
    div.classList.add('page-preview');
    div.setAttribute('page_id', currentPageIndex);
    div.onclick = (e) => {
        currentPageIndex = parseInt(div.getAttribute('page_id'));
        switch_objs();
        $('.page').click();
    }
    switch_objs();
    page.dom = div;
    page_box.appendChild(div);
}

function delete_page() {
    if(pages.length==0){
        tip('你还没有创建页面!');
        return;
    }
    var page=pages[currentPageIndex];
    page.dom.parentNode.removeChild(page.dom);
    pages.splice(currentPageIndex, 1);
    currentPageIndex--;
    if(currentPageIndex<0){
        if(pages.length>0){
            currentPageIndex=0;
        }else{
            currentPageIndex=-1;
        }
    }
    $('.page').innerHTML="";
}
function up_page(){
    if(currentPageIndex==0){
        tip('当前页面已经是第一页');
        return;
    }
    var page_1=pages[currentPageIndex];
    var page_2=pages[currentPageIndex-1];
    pages[currentPageIndex]=page_2;
    pages[currentPageIndex-1]=page_1;
    currentPageIndex-=1;
    if(currentPageIndex<0)currentPageIndex=0;
    if(currentPageIndex>=pages.length)currentPageIndex=pages.length-1;
	page_1.dom.setAttribute(currentPageIndex);
	page_2.dom.setAttribute(currentPageIndex+1);
    page_1.dom.after(page_2.dom);
}
function down_page(){
    if(currentPageIndex==pages.length-1){
        tip('当前页面已经是最后一页');
        return;
    }
    var page_1=pages[currentPageIndex];
    var page_2=pages[currentPageIndex+1];
    pages[currentPageIndex]=page_2;
    pages[currentPageIndex+1]=page_1;
    currentPageIndex+=1;
    if(currentPageIndex<0)currentPageIndex=0;
    if(currentPageIndex>=pages.length)currentPageIndex=pages.length-1;
	page_1.dom.setAttribute(currentPageIndex);
	page_2.dom.setAttribute(currentPageIndex-1);
    page_2.dom.after(page_1.dom);
}
function page_init() {
    hide_all_attrtab();
    $('.page').addEventListener('click', (e) => {
        if(pages.length==0){
            return;
        }
        hide_all_attrtab();
        $(".pageattr").style.display = "block";
        if ($('.active')) {
            $('.active').classList.remove('active');
        }
        $('.pageattr>.page-x').value = pages[currentPageIndex].x;
        $('.pageattr>.page-y').value = pages[currentPageIndex].y;
        $('.pageattr>.page-z').value = pages[currentPageIndex].z;
        $('.pageattr>.page-rotate-x').value = pages[currentPageIndex].rotate_x;
        $('.pageattr>.page-rotate-y').value = pages[currentPageIndex].rotate_y;
        $('.pageattr>.page-rotate-z').value = pages[currentPageIndex].rotate_z;
        $('.pageattr>.page-scale').value = pages[currentPageIndex].scale;
        $('.pageattr>.page-hasback').checked=pages[currentPageIndex].has_back;
        $('.animation-tab').innerHTML="";
    });
    $('.pageattr>.page-x').addEventListener('change', (e) => {
        pages[currentPageIndex].x = $('.pageattr>.page-x').value;
    });
    $('.pageattr>.page-y').addEventListener('change', (e) => {
        pages[currentPageIndex].y = $('.pageattr>.page-y').value;
    });
    $('.pageattr>.page-z').addEventListener('change', (e) => {
        pages[currentPageIndex].z = $('.pageattr>.page-z').value;
    });

    $('.pageattr>.page-rotate-x').addEventListener('change', (e) => {
        pages[currentPageIndex].rotate_x = $('.pageattr>.page-rotate-x').value;
    });
    $('.pageattr>.page-rotate-y').addEventListener('change', (e) => {
        pages[currentPageIndex].rotate_y = $('.pageattr>.page-rotate-y').value;
    });
    $('.pageattr>.page-rotate-z').addEventListener('change', (e) => {
        pages[currentPageIndex].rotate_z = $('.pageattr>.page-rotate-z').value;
    });

    $('.pageattr>.page-scale').addEventListener('change', (e) => {
        pages[currentPageIndex].scale = $('.pageattr>.page-scale').value;
    });

    $('.pageattr>.page-hasback').addEventListener('change', (e) => {
        pages[currentPageIndex].has_back = $('.pageattr>.page-hasback').checked;
    });
}